<h1>
  {{title}}
</h1>

<div>
  <h3>Select files</h3>
  
  Multiple
  <input type="file" ng2FileSelect [uploader]="uploader" multiple ><br/>
  
  Single
  <input type="file" ng2FileSelect [uploader]="uploader" />
  
  <h3>Upload queue</h3>
  <p>Queue length: {{ uploader?.queue?.length }}</p>

  <table class="table">
    <thead>
    <tr>
    <th width="30%">Name</th>
      <th width="5%">Size</th>
      <th width="20%">Progress</th>
      <th width="20%">Status</th>
      <th width="25%">Actions</th>
    </tr>
    </thead>

    <tbody>
    <tr *ngFor="let item of uploader.queue">
      <td><strong>{{ item?.file?.name }}</strong></td>
      <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
      <td *ngIf="uploader.isHTML5">
        <div [ngStyle]="{ 'width': item.progress + '%' }"></div>
      </td>
      <td>
        <span *ngIf="item.isSuccess">OK</span>
        <span *ngIf="item.isCancel">Cancel</span>
        <span *ngIf="item.isError">Error</span>
      </td>
      <td>
        <button type="button" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
          Upload
        </button>
        <button type="button" (click)="item.cancel()" [disabled]="!item.isUploading">
          Cancel
        </button>
        <button type="button" (click)="item.remove()">
          Remove
        </button>
      </td>
    </tr>
    </tbody>
    </table>
    
    <div>
      Queue progress:
      <div [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
      
      <button type="button" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
        Upload all
      </button>
      <button type="button" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
        Cancel all
      </button>
            <button type="button" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
        Remove all
      </button>
    </div>
</div>